import React, { useState } from "react";
import { useEffect } from "react";
import { Label } from "@ct0/ui";

export default function LabelPanel() {
  return (
    <div>
      <h2>Label 组件</h2>
      <ul>
        <li>用于标记事物属性和纬度的组件</li>
      </ul>

      <h2>调用方式</h2>
      <div>
        <h4>引用</h4>
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            import {"\u007b"} Label {"\u007d"} from '@ct0/ui'{"\n"}
          </code>
        </pre>
        <h4>自定义颜色的标签</h4>
        <Label color="#C55252" text="#C55252" /> &nbsp;
        <Label color="#ED754B" text="#ED754B" /> &nbsp;
        <Label color="#FFCE22" text="#FFCE22" /> &nbsp;
        <Label color="#4093E0" text="#4093E0" /> &nbsp;
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`<Label color='#C55252' text='#C55252' />`}
          </code>
        </pre>
        <h4>外边框的标签</h4>
        <Label outline color="#C55252" text="#C55252" /> &nbsp;
        <Label outline color="#ED754B" text="#ED754B" /> &nbsp;
        <Label outline color="#FFCE22" text="#FFCE22" /> &nbsp;
        <Label outline color="#4093E0" text="#4093E0" /> &nbsp;
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`<Label outline color='#C55252' text='#C55252' />`}
          </code>
        </pre>
        <h4>禁用状态的标签</h4>
        <Label text="禁用状态" disabled /> &nbsp;
        <Label outline text="禁用状态" disabled /> &nbsp;
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`<Label text='禁用状态' disabled />`}
          </code>
        </pre>
        <h4>超长内容的标签</h4>
        <Label>
          (50个字)12345678901234567890123456789012345678901234567890
        </Label>
        &nbsp; &nbsp;
        <Label ellipsis>
          (50个字)12345678901234567890123456789012345678901234567890
        </Label>
        <br />
        <br />
        <Label>1</Label>
        &nbsp;
        <Label ellipsis>2</Label>
        &nbsp;
        <Label>3</Label>
      </div>

      <h2>API</h2>
      <table border="1" cellPadding="5">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>color</td>
            <td></td>
            <td>颜色</td>
            <td>string</td>
            <td></td>
          </tr>
          <tr>
            <td>outline</td>
            <td></td>
            <td>是否是外边框样式</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td></td>
            <td>是否是禁用状态</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>text</td>
            <td></td>
            <td>文本</td>
            <td>string</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
